<template>
  <div class="product-main-wrap">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <span>订单编号：</span>
                <el-input
                  v-model="proNum"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>

              <div class="grid-content bg-purple">
                <span>商品名称：</span>
                <el-input
                  v-model="proName"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>

              <div class="grid-content bg-purple">
                <span>商品ID：</span>
                <el-input
                  v-model="proId"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <span>订单状态：</span>
                <el-select
                  v-model="orderState"
                  placeholder="全部"
                  class="selecte-radiu"
                >
                  <el-option
                    v-for="item in state"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </div>

              <div class="grid-content bg-purple">
                <span>买家ID：</span>
                <el-input
                  v-model="buyId"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>

              <div class="grid-content bg-purple">
                <span>收货人姓名：</span>
                <el-input
                  v-model="byName"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <span>下单时间：</span>
                <el-input
                  v-model="orderDate"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>
              <div class="grid-content bg-purple">
                <span>快递单号：</span>
                <el-input
                  v-model="maileNum"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>
              <div class="grid-content bg-purple">
                <span>收货人手机号：</span>
                <el-input
                  v-model="buyPhone"
                  placeholder="请输入"
                  class="input-product"
                />
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="buttons">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="btns">
            <el-button type="primary" round class="btn-reset">重置</el-button>
            <el-button type="primary" round class="btn-screen">筛选</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <br />
    <br />

    <div>
      <p class="item">全部订单</p>
    </div>
    <div class="cen">
      <ul>
        <li class="title">
          <span><input type="checkbox" /></span>
          <span></span>
          <span style="text-align:left">商品</span>
          <span>单价</span>
          <span>数量</span>
          <span>订单编号</span>
          <span>订单创建时间</span>
          <span>买家信息</span>
          <span>实收款</span>
          <span>操作</span>
        </li>
        <li class="content" v-for="item in list" :key="item.goodsId">
          <span><input type="checkbox" /></span>
          <img :src="item.goodsImg" alt="">
          <span>{{ item.goodsName }}</span>
          <span>{{ item.goodsSale }}</span>
          <span>{{ item.goodsNum }}</span>
          <span>{{ item.itemNum }}</span>
          <span>{{ item.goodsDate }}</span>
          <span>{{ item.nickname }}</span>
          <span>{{ item.goodsSale }}</span>
          <span>
            <a style="color: #126dff">订单详情</a>
          </span>
        </li>
      </ul>
    </div>

    <el-pagination
      style="text-align: center; margin-left: 340px"
      background="true"
      layout="prev, pager, next, jumper"
      :total="count"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import allorder from "../../../../mock/allorder";

export default defineComponent({
  setup() {
    const count = ref(0);
    const num = ref<number>(1);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = async (val: number) => {
      console.log(val);
      num.value = val;
      const res: any = await allorder.getData({
        page: num.value,
        size: 10,
      });
      console.log(num.value);
      list.value = res.result;
    };
    interface NavList {
      [propname: string]: string;
    }
    let list = ref<NavList[]>([]);
    onMounted(async () => {
      const res: any = await allorder.getData({
        page: num.value,
        size: 10,
      });

      console.log("data", res.result);
      list.value = res.result;
      count.value = res.count;
    })

    const value = ref("");
    const state = [
      {
        value: "全部",
        label: "全部",
      },
      {
        value: "已付款",
        label: "已付款",
      },
      {
        value: "未付款",
        label: "未付款",
      },
      {
        value: "已关闭",
        label: "已关闭",
      },
      {
        value: "交易成功",
        label: "交易成功",
      },
    ];
    // const value = ref("");
    const classify = [
      {
        value: "全部",
        label: "全部",
      },
      {
        value: "销售中",
        label: "销售中",
      },
      {
        value: "未上架",
        label: "未上架",
      },
      {
        value: "已下架",
        label: "已下架",
      },
    ];
    const proNum = ref("");
    const proName = ref("");
    const proId = ref("");
    const orderState = ref("");
    const byName = ref("");
    const buyId = ref("");
    const orderDate = ref("");
    const maileNum = ref("");
    const buyPhone = ref("");
    return {
      value,
      state,
      classify,
      proNum,
      proName,
      proId,
      orderState,
      buyId,
      byName,
      orderDate,
      maileNum,
      buyPhone,
      list,
      currentPage,
      pageSize,
      handleSizeChange,
      handleCurrentChange,
      count,
      num
    };
  },
});
</script>

<style lang="less" scoped>
.cen {
  .content {
    display: flex;
    justify-content: space-around;
    height: 66px;
    line-height: 66px;
    font-size: 12px;
    text-align: center;
    align-items: center;
    background: white;
    span {
      // width: 10%;
      flex: 1;
      a {
        margin-right: 3px;
      }
    }
  }
  .title {
    display: flex;
    height: 66px;
    justify-content: space-around;
    line-height: 66px;
    font-size: 16px;
    color: white;
    background: #126dff;
    text-align: center;
    align-items: center;
    span {
      width: 10%;
    }
  }
}
.item {
  font-size: 16px;
  font-weight: bolder;
  padding-left: 7px;
  margin-bottom: 20px;
  border-left: 3px solid blue;
  span {
    font-size: 12px;
  }
}
.el-col {
  border-radius: 4px;
  background: #fff;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.product-main-wrap {
  /deep/.el-input__wrapper {
    border-radius: 50px !important;
  }
  /deep/.el-col {
    padding: 10px;
    text-align: right;
    padding-right: 70px;
  }
  /deep/.el-input--suffix {
    display: inline-flex;
    width: 94%;
  }
  .bg-purple-dark {
    .grid-content {
      margin-bottom: 20px;
    }
  }
  .input-product {
    // /deep/ .el-input {
    width: 50%;
    // }
  }
  .buttons {
    height: 70px;
    .btns {
      width: 300px;
      margin: 0 auto;
      // margin-top: 10px;
      .btn-reset {
        background: #eaf0ff;
        color: #004dff;
        margin-right: 50px;
      }
      .btn-screen {
        background: #126dff;
        width: 150px;
      }
    }
  }
}
</style>
